<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { PaymentItemApi } from '@/api/payment-item';
import AuthBar from '@/components/authBar/index.vue';
import { PAY_TYPE } from '@/enums/pay.enums';
import { useUserStore } from '@/store/userStore';
import { buildAssetSource } from '@/utils';
import { currRoute, withQueryString } from '@/utils/router.utils';

const payMethodList = [
  {
    name: '支付宝支付',
    desc: '支持扫码、人脸、亲情码',
    icon: 'alipay.png',
    tags: ['扫码支付', '人脸支付', '亲情码']
  },
  {
    name: '微信支付',
    desc: '支持扫码、人脸、亲情码',
    icon: 'wechat.png',
    tags: ['扫码支付', '人脸支付', '亲情码']
  },
  {
    name: '医保支付',
    desc: '医保电子凭证扫码或插入卡片支付',
    icon: 'yibao-pay.png',
    tags: ['医保码', '人脸支付', '医保卡']
  },
  {
    name: '银联支付',
    desc: '支持云闪付、银行卡、NFC闪付',
    icon: 'bank-card.png',
    tags: ['云闪付', '银行卡', 'NFC闪付']
  }
];

const { query } = currRoute();

const { userInfo } = storeToRefs(useUserStore());

function handleToPay() {
  uni.showLoading({
    mask: true,
    title: '订单创建中...'
  });
  // 创建订单
  PaymentItemApi.createOrder({
    id: Number(query.itemId),
    paymentType: PAY_TYPE.ALIPAY,
    patientId: userInfo.value.patientId
  }).then(payOrderId => {
    uni.navigateTo({
      url: withQueryString('/pages/pay/alipayCode', {
        redirectUrl: '/pages/selfPay/paySuccess',
        payOrderId,
        totalAmount: query.totalAmount
      })
    });
  }).finally(() => {
    uni.hideLoading();
  });
}
</script>

<template>
  <view class="pay-method flex-col">
    <AuthBar />
    <view class="h-0 flex-1 overflow-auto">
      <view class="pay-method__title">
        选择支付方式
      </view>
      <view class="pay-method__subtitle">
        请选择以下支付方式完成缴费
      </view>
      <view class="pay-method__content">
        <wd-row :gutter="30">
          <wd-col v-for="item in payMethodList" :key="item.name" :span="12" @click="handleToPay()">
            <view class="pay-method__card mt-20">
              <view class="method-card__cover m-auto mt-60">
                <image :src="buildAssetSource(item.icon)" class="h-115 w-115" />
              </view>
              <view class="method-card__title">
                {{ item.name }}
              </view>
              <view class="method-card__desc">
                {{ item.desc }}
              </view>

              <view class="mt-45 px-26">
                <wd-row :gutter="10">
                  <wd-col v-for="tag in item.tags" :key="tag" :span="8">
                    <view class="method-card__tag">
                      {{ tag }}
                    </view>
                  </wd-col>
                </wd-row>
              </view>
            </view>
          </wd-col>
        </wd-row>
        <view class="mt-100 px-30">
          <view class="pay-method__tips">
            <view class="tips-title">
              <wd-icon name="help-circle" size="32px" />支付遇到问题
            </view>
            <view class="tips-content">
              <view>
                1.可能原因：网络波动、终端系统延迟、二维码有效期已过（通常 120 秒）
              </view>
              <view class="mt-10">
                2.银行卡芯片损坏、磁条磨损、NFC 感应区未对准、卡片未开通银联在线支付功能。
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '自助缴费',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.pay-method {
  background-color: var(--bg-color);
  height: 100%;

  .pay-method__title {
    color: var(--text-color);
    font-size: 60px;
    font-weight: bold;

    text-align: center;
    margin-top: 60px;
  }

  .pay-method__subtitle {
    color: var(--secondary-text-color);
    text-align: center;
    margin-bottom: 32px;
  }

  .pay-method__content {
    padding: 0 35px;
    box-sizing: border-box;
  }

  .pay-method__card {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    padding-bottom: 60px;

    .method-card__cover {
      @apply flex-center;
      background: #f3f7ff;
      width: 153px;
      height: 153px;
      border-radius: 50%;
    }

    .method-card__title {
      font-size: 36px;
      font-weight: bold;

      color: var(--text-color);
      text-align: center;
      margin-top: 24px;
    }

    .method-card__desc {
      font-size: 20px;
      color: var(--secondary-text-color);
      text-align: center;
      margin-top: 10px;
    }

    .method-card__tag {
      background: #f3f7ff;
      border-radius: 100px;
      font-size: 24px;
      color: var(--secondary-text-color);
      flex: 1;
      text-align: center;
    }
  }

  .pay-method__tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 0 38px 31px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 35px;
    }
  }
}
</style>
